<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false"
		:close-on-press-escape="false" :fullscreen="true">
		<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="name" label='名称'>
				<el-input v-model="dataForm.name" placeholder='名称'></el-input>
			</el-form-item>
			<el-form-item prop="remark" label='备注'>
				<el-input v-model="dataForm.remark" placeholder='备注'></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item size="mini" label='菜单授权'>
						<el-tree :data="menuList" :props="{ label: 'name', children: 'children' }" node-key="id"
							ref="menuListTreeRef" accordion show-checkbox>
						</el-tree>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item size="mini" label='数据授权'>
						<el-tree :data="deptList" :props="{ label: 'name', children: 'children' }" node-key="id"
							ref="deptListTreeRef" accordion show-checkbox>
						</el-tree>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		ElMessage
	} from 'element-plus'
	import {
		getMenuSelect
	} from '@/network/sys/menu'
	import {
		getDeptLists
	} from '@/network/sys/dept'
	import {
		getRoleById,
		postRole,
		putRole
	} from '@/network/sys/role'

	export default {
		name: "RoleAddOrUpdateComponent",
		emits: ['refreshDataList'],

		setup(props, {
			emit
		}) {
			const visible = ref(false);
			const menuList = ref([]);
			const deptList = ref([]);
			const dataForm = ref({
				id: '',
				name: '',
				menuIdList: [],
				deptIdList: [],
				remark: ''
			});
			const dataRule = reactive({
				name: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}]
			})
			const dataFormRef = ref(null)
			const menuListTreeRef = ref(null)
			const deptListTreeRef = ref(null)

			const init = () => {
				visible.value = true;
				nextTick(function() {
					dataFormRef.value.resetFields();
					menuListTreeRef.value.setCheckedKeys([])
					deptListTreeRef.value.setCheckedKeys([]);
					Promise.all([
						getMenuList(),
						getDeptList()
					]).then(function() {
						if (dataForm.value.id) {
							getInfo();
						}
					})
				})
			}

			// 获取菜单列表
			const getMenuList = () => {
				return getMenuSelect().then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					menuList.value = res.data;
				}).catch(function() {});
			}

			// 获取部门列表
			const getDeptList = () => {
				return getDeptLists().then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					deptList.value = res.data;
				}).catch(function() {});
			}

			// 获取信息
			const getInfo = () => {
				getRoleById(dataForm.value.id).then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = _.assignIn({}, dataForm.value, res.data);
					dataForm.value.menuIdList.forEach(function(item) {
						menuListTreeRef.value.setChecked(item, true);
					});
					dataForm.value.deptIdList.forEach(function(item) {
						deptListTreeRef.value.setChecked(item, true);
					});

					// deptListTreeRef.value.setCheckedKeys(dataForm.value.deptIdList,true);
				}).catch(function() {});
			}

			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate((valid) => {
					if (!valid) {
						return false;
					}
					dataForm.value.menuIdList = menuListTreeRef.value.getHalfCheckedKeys().concat(
						menuListTreeRef.value.getCheckedKeys());
					dataForm.value.deptIdList = deptListTreeRef.value.getCheckedKeys()

					let qing = () => {
						return !dataForm.value.id ? postRole(dataForm.value) : putRole(dataForm.value)
					}
					qing().then((res) => {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: "操作成功",
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false;
								emit('refreshDataList');
							}
						});
					}).catch(function() {});
				});
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			return {
				visible,
				menuList,
				deptList,
				dataForm,
				dataRule,
				dataFormRef,
				menuListTreeRef,
				deptListTreeRef,
				init,
				getMenuList,
				getDeptList,
				getInfo,
				dataFormSubmitHandle
			}
		},
	}
</script>

<style scoped>

</style>
